The Golden Ratio and User-Interface Design黃金比例與使用者介面設計

黃金比例雖然傳統上用於藝術和建築，但在介面設計中也可以作為參考，幫助設計出美觀的介面。

比例系統基於比率，已在建築和藝術中使用了幾個世紀。黃金比例（φ）最早可追溯至公元前500年，由菲迪亞斯（Phidias）、柏拉圖（Plato）和歐幾裡得（Euclid）提出。這一比例在歷史上多次被發現，因此有許多別名，如黃金均值、黃金比例、黃金分割、神聖比例（由達·芬奇提出）等。

黃金比例的數學定義

黃金比例的定義：如果兩個數量 aa 和 bb （a>ba > b）滿足它們的比等於其和與較大數量之比，則稱它們滿足黃金比例：

黃金比例的值約為 1.618033...（無理數）。例如，1/0.618≈1.6181/0.618 \approx 1.618。

黃金比例與美學偏好

一項由 Giacomo Rizzolatti 和 Cinzia Di Dio 進行的研究表明，人類大腦可能天生偏好符合黃金比例的人體。參與者在觀看符合和不符合黃金比例的雕像影象時，符合黃金比例的原始影象啟用了特定的大腦細胞，而扭曲的版本未能啟用這些細胞。這暗示美感可能部分源於先天。

黃金比例在自然界、建築、繪畫和音樂中均有體現，通常被認為能創造出有機、平衡且吸引人眼球的構圖。經典例子包括：

黃金矩形與黃金螺旋 (The Golden Rectangle and Spiral)

黃金矩形的邊處於黃金比例（a / b = φ）中。
當你將一個黃金矩形像上面影象中那樣分割成一個正方形和一個較小的矩形時，這個較小的矩形也是一個黃金矩形。

黃金矩形是指邊長比為黃金比例的矩形。其特殊性質是：若將矩形分割成一個正方形和一個較小的矩形，較小的矩形仍然是黃金矩形。

這種分割可以無限進行，最終形成黃金螺旋，連線每個正方形的對角點即可繪製出螺旋曲線。

黃金螺旋廣泛存在於自然界，如植物生長形態和天氣模式（如颶風）。

要獲得黃金螺旋線，首先將一個黃金矩形 ABCD 分割成一個正方形 ABEF 和一個較小的黃金矩形 EFDC。然後對較小的黃金矩形 EFDC 重複該過程。黃金螺旋線是透過連線所得正方形的對角而形成的。

黃金比例在使用者介面設計中的應用 (Examples of the Golden Ratio in UI Design)

字型大小 (Text Sizes)

字型大小可以按照黃金比例調整。例如：

如果正文的字型大小為16px，則標題字型大小可為黃金比例的倍數： px。

行高是字型的高度，加上文字行之間的間距

行高（字型高度加行間空白）也可按照黃金比例調整，例如：正文字型為16px，行高為 px。

頂部：標題和正文文字的大小處於黃金比例。行高也與字型大小呈黃金比例。行高的增加使閱讀更容易。底部：此文字塊未使用黃金比例。

注意：行長度增加時，需要適當增大行高以維持可讀性。

圖片裁剪 (Image Cropping)

透過黃金螺旋確定圖片的焦點並進行裁剪，可快速建立視覺吸引力強的構圖。

透過將螺旋放置在影象的焦點上，然後相應地裁剪影象來建立一個強大的構圖，就像左邊的示例中那樣。
如何使用黃金螺旋來裁剪影象。

網頁佈局 (Webpage Layout)

黃金矩形的分割自然形成了適合主要內容區和側邊欄的雙列布局。基於黃金比例建立的網格結構可為介面提供平衡感。雖然完全支援所有視口尺寸可能較難，但利用黃金比例基本網格能在部分螢幕尺寸上實現設計最佳化。

一種在左側使用黃金比例的基本網頁網格結構。
如何使用黃金比例建立一個寬鬆的頁面網格。